<template>
  <!-- 业务类型组件 -->
  <div class="checkbox-multiple" v-loading="isLoading">
    <div class="checkbox-list">
      <template v-if="optionsData.length">
        <el-checkbox-group v-model="filterListData[0].value">
          <el-checkbox :value="item.portraitId" v-for="item in optionsData" :key="item.portraitId">
            <span>{{ item.portraitName }}</span>
          </el-checkbox>
        </el-checkbox-group>
      </template>
      <el-empty v-else :image-size="60" description="" />
    </div>
    <div class="checkbox-multiple__buttons">
      <el-button type="primary" class="buttons-cancel" link size="default" @click="handelReset">重置</el-button>
      <el-button type="primary" class="buttons-confirm" size="default" @click="handelConfirm">确定</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { portraitList } from "@/apis/dict/dict";
import useFilterComponents from "@/views/engineeringManage/hooks/useFilterComponents";

const props = defineProps({
  filterList: {
    type: Array,
    default: () => [
      {
        filterId: "portrait_id",
        title: "业务类型",
        condition: [
          {
            label: "等于",
            value: "in"
          },
          {
            label: "不等于",
            value: "notIn"
          }
        ],
        option: {
          type: "MultipleSelect",
          lazy: true,
          dataSource: {
            type: "url",
            value: "/crm/system/filter/portraitList"
          },
          data: []
        },
        compare: "in",
        value: []
      }
    ]
  }
});

const emits = defineEmits(["handelFilterData"]);
const { handelReset, handelConfirm, filterListData } = useFilterComponents(props, emits);

const isLoading = ref(false);
const optionsData = ref([]);
const getPortraitList = async () => {
  try {
    isLoading.value = true;
    const { data } = await portraitList();
    optionsData.value = data ?? [];
    isLoading.value = false;
  } catch (err) {
    isLoading.value = false;
    console.log(err);
  }
};
getPortraitList();
</script>

<style scoped lang="scss">
@import "businessType";
</style>
